<template>
    <div class="tableRow">
        <el-row class="toolbar">
            <el-button type="primary" icon="el-icon-plus" size="mini" plain @click="handleAdd"
                       v-permission="'system:menu:add'"> 新增
            </el-button>
            <el-button type="info" icon="el-icon-edit" :disabled="dialog.isBatchEditDisabled" size="mini" plain
                       @click="handleEdit" v-permission="'system:menu:edit'"> 编辑
            </el-button>
            <el-button type="danger" icon="el-icon-delete" :disabled="dialog.isBatchRemoveDisabled" size="mini" plain
                       @click="handleBatchDelete" v-permission="'system:menu:remove'"> 删除
            </el-button>
        </el-row>
        <tree-table :columns="columns" :data="data" :operates="operates"
                    @handleSelectionChange="handleSelectionChange"/>
        <el-dialog :title="dialog.title"
                   :visible.sync="dialog.dialogFormVisible"
                   :modal-append-to-body="false"
                   :destroy-on-close="false"
                   @close="closeDialog"
                   width="600px">
            <el-form :model="menuModel" ref="menuForm" label-width="100px" :rules="menuFormRules" size="small ">
                <el-form-item label="菜单类型" prop="menuType">
                    <el-radio-group v-model="menuModel.menuType" :disabled="dialog.isEdit" @change="typeChange">
                        <el-radio label="M">目录</el-radio>
                        <el-radio label="C">菜单</el-radio>
                        <el-radio label="F">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="上级菜单" prop="parentId" v-if="menuModel.menuType!=='M'">
                    <!--el-tree-select  文档地址 https://ayiaq1.github.io/el-tree-select/website/#/components/ElTreeSelect-->
                    <el-tree-select v-model="menuModel.parentId" :selectParams="dialog.selectParams"
                                    :treeParams="dialog.treeParams"
                                    @searchFun="searchFun" ref="treeSelect"/>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="menuModel.menuName" placeholder="菜单名称"/>
                </el-form-item>
                <el-form-item label="菜单地址" prop="url" v-if="menuModel.menuType!=='F'">
                    <el-input v-model="menuModel.url" placeholder="菜单地址"/>
                </el-form-item>
                <el-form-item label="权限标识" prop="perms" v-if="menuModel.menuType!=='M'">
                    <el-input v-model="menuModel.perms" placeholder="权限标识"/>
                </el-form-item>
                <el-form-item label="显示排序" prop="orderNum">
                    <el-input-number v-model="menuModel.orderNum" value="1" :min="1" label="显示顺序"/>
                </el-form-item>
                <el-form-item label="菜单状态" v-if="menuModel.menuType !== 'F'" prop="visible">
                    <el-switch v-model="menuModel.visible" active-color="#13ce66" inactive-color="#ff4949"
                               active-text="显示"
                               inactive-text="隐藏"
                               active-value="0"
                               inactive-value="1"/>
                </el-form-item>
                <el-form-item label="图标" prop="icon" v-if="menuModel.menuType==='M'">
                    <e-icon-picker v-model="menuModel.icon"/>
                </el-form-item>
                <el-form-item label="组件路径" prop="component" v-if="menuModel.menuType==='C'">
                    <el-input v-model="menuModel.component" placeholder="组件路径"/>
                </el-form-item>
                <!-- <el-form-item label="默认路径" prop="redirect" v-if="form.menuType==='M'">
                   <el-input v-model="form.redirect" placeholder="默认路径"></el-input>
                 </el-form-item>-->
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="menuModel.remark" placeholder="备注" maxlength="100"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.dialogFormVisible=false" size="medium">取 消</el-button>
                <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import {Component, Ref, Vue} from "vue-property-decorator";
    import TreeTable from "@/components/TreeTable/TreeTable.vue";
    import {
        addMenu,
        checkMenuNameUnique,
        getMenuTreeData,
        menuTreeSelectData,
        removeMenu,
        updateMenu
    } from "@/api/menu";

    @Component({components: {TreeTable}})
    export default class Menu extends Vue {
        private data: Array<any> = [];
        @Ref("menuForm") private menuForm: any;
        @Ref("treeSelect") private treeSelect: any;
        columns: any = [
            {
                label: "ID",
                prop: "id",
                width: 150
            },
            {
                label: "名称",
                prop: "menuName"
            },
            {
                label: "排序",
                prop: "orderNum"
            },
            {
                label: "菜单地址",
                prop: "url"
            },
            {
                label: "图标",
                prop: "icon", render: function (createElement, row) {
                    if (row && row.row && row.row.icon) {
                        return createElement("i", {
                                attrs: {
                                    class: row.row.icon
                                }
                            }, [""]
                        );
                    }
                }
            }, {
                label: "可见", prop: "visible", sortable: "custom", render: function (createElement, row) {
                    if (row && row.row && row.row.visible === "0") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "success"
                                }
                            }, ["显示"]
                        );
                    } else if (row && row.row && row.row.visible === "1") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "warning"
                                }
                            }, ["隐藏"]
                        );
                    } else {
                        return createElement("div", {}, [""]);
                    }
                }
            },
            {
                label: "类型",
                prop: "menuType", render: function (createElement, row) {
                    if (row && row.row && row.row.menuType === "M") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "success"
                                }
                            }, ["目录"]
                        );
                    } else if (row && row.row && row.row.menuType === "C") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "info"
                                }
                            }, ["菜单"]
                        );
                    } else if (row && row.row && row.row.menuType === "F") {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "warning"
                                }
                            }, ["按钮"]
                        );
                    } else {
                        return createElement("el-tag", {
                                attrs: {
                                    type: "danger"
                                }
                            }, ["未知"]
                        );
                    }
                }
            },
            {
                label: "权限标识",
                prop: "perms"
            }
        ];
        operates: any = {
            width: 200,
            fixed: "right",
            list: [
                {
                    label: "编辑",
                    type: "warning",
                    icon: "el-icon-edit",
                    plain: true,
                    disabled: (index, row) => {
                        return false;
                    },
                    permission: "system:menu:edit",
                    method: (index, row) => {
                        this.handleEdit(index, row);
                    }
                },
                {
                    label: "删除",
                    type: "danger",
                    icon: "el-icon-delete",
                    plain: true,
                    disabled: (index, row) => {
                        return false;
                    },
                    permission: "system:menu:remove",
                    method: (index, row) => {
                        this.handleDelete(index, row);
                    }
                }
            ]
        };
        dialog: any = {
            dialogFormVisible: false,
            title: "对话框",
            isEdit: false,
            isBatchEditDisabled: true,
            isBatchRemoveDisabled: true,
            formData: [],
            selectParams: {
                clearable: true,
                placeholder: "请选择上级菜单"
            },
            treeParams: {
                clickParent: true,
                filterable: true,
                accordion: true,
                data: [],
                props: {
                    children: "children",
                    label: "label",
                    disabled: "disabled",
                    value: "id"
                }
            }
        };
        menuModel: any = {
            parentId: 0,
            orderNum: {
                type: Number,
                default: 1
            },
            menuType: "",
            menuName: "",
            url: "",
            perms: "",
            visible: "",
            icon: "",
            component: "",
            redirect: "",
            remark: ""
        };
        menuFormRules: any = {
            menuName: [
                {required: true, message: "菜单名称不能为空", trigger: ["blur"]},
                {validator: this.validateMenuNameUnique, trigger: "blur"}
            ], menuType: [
                {required: true, message: "菜单类型不能为空", trigger: ["blur"]}
            ], parentId: [
                {required: true, message: "上级菜单不能为空", trigger: ["blur"]}
            ], url: [
                {required: true, message: "菜单地址不能为空", trigger: ["blur"]}
            ], perms: [
                {required: true, message: "权限标识不能为空", trigger: ["blur"]}
            ], orderNum: [
                {required: true, message: "显示排序不能为空", trigger: ["blur"]}
            ], visible: [
                {required: true, message: "菜单状态不能为空", trigger: ["blur"]}
            ], icon: [
                {required: true, message: "图标不能为空", trigger: ["change"]}
            ], component: [
                {required: true, message: "组件路径不能为空", trigger: ["blur"]}
            ], redirect: [
                {required: true, message: "默认路径不能为空", trigger: ["blur"]}
            ]
        };


        /*新增*/
        handleAdd(): void {
            let self = this;
            self.dialog.title = "添加菜单";
            self.dialog.isEdit = false;
            menuTreeSelectData().then((response: any) => {
                self.menuModel.menuType = "M";
                self.menuModel.orderNum = 1;
                if (response.data) {
                    self.dialog.treeParams.data = response.data;
                }
                self.dialog.dialogFormVisible = true;
            }).catch((e) => {
                console.log(e);
            });
        }


        /*编辑*/
        handleEdit(index: number, row: any): void {
            let self = this;
            self.dialog.title = "编辑菜单";
            self.dialog.isEdit = true;
            menuTreeSelectData().then((response: any) => {
                self.menuModel = Object.assign({}, row || this.dialog.formData[0]);
                if (response.data) {
                    self.dialog.treeParams.data = response.data;
                }
                self.dialog.dialogFormVisible = true;
            }).catch((e) => {
                console.log(e);
            });
        }

        /*删除*/
        handleDelete(index, row) {
            this.$confirm("确定要删除该选项？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                return removeMenu({"ids": [row.id]});
            }).then((response: any) => {
                this.getData();
                this.$message.success(response.msg);
            }).catch((e) => {
                console.log(e);
            });
        }

        submitForm(): void {
            let self = this;
            self.menuForm.validate((valid: boolean) => {
                if (valid) {
                    switch (self.menuModel.menuType) {
                        case "M":
                            self.menuModel.component = "Layout";
                            self.menuModel.parentId = 0;
                            delete self.menuModel["perms"];
                            break;
                        case "C":
                            delete self.menuModel["redirect"];
                            delete self.menuModel["icon"];
                            break;
                        case "F":
                            delete self.menuModel["url"];
                            delete self.menuModel["icon"];
                            delete self.menuModel["component"];
                            delete self.menuModel["redirect"];
                            break;
                    }
                    delete self.menuModel.children;

                    if (self.dialog.isEdit) {
                        //编辑
                        updateMenu(self.menuModel).then((response: any) => {
                            self.getData();
                            self.reset();
                            self.dialog.dialogFormVisible = false;
                            self.$message.success(response.msg);
                        }).catch((e) => {
                            console.log(e);
                        });
                    } else {
                        //新增
                        addMenu(self.menuModel).then((response: any) => {
                            self.getData();
                            self.reset();
                            self.dialog.dialogFormVisible = false;
                            self.$message.success(response.msg);
                        }).catch((e) => {
                            console.log(e);
                        });
                    }
                }
            });
        }

        /*验证菜单名称是否唯一*/
        validateMenuNameUnique(rule: any, value: any, callback: any) {
            checkMenuNameUnique({
                menuName: value,
                id: this.menuModel.id,
                parentId: this.menuModel.parentId
            }).then((res: any) => {
                if (res.data && res.data === '0') {
                    callback();
                } else {
                    callback(new Error("菜单已经存在"));
                }
            }).catch((err: any) => {
                console.log(err);
                callback(new Error("菜单已经存在"));
            })
        };

        /*选中事件*/
        handleSelectionChange(val): void {
            if (val) {
                this.dialog.isBatchRemoveDisabled = val.length <= 0;
                this.dialog.isBatchEditDisabled = val.length !== 1;
            }
            this.dialog.formData = val;
        }

        /*批量删除*/
        handleBatchDelete() {
            let self = this;
            //删除
            self.$confirm("确定要删除选定选项？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                let ids: Array<any> = [];
                self.dialog.formData.forEach((item, index) => {
                    ids[index] = item.id;
                });
                return removeMenu({"ids": ids});
            }).then((response: any) => {
                this.getData();
                this.$message.success(response.msg);
            }).catch((e) => {
                console.log(e);
            });
        }

        getData() {
            getMenuTreeData().then(response => {
                this.data = response.data;
            }).catch((e) => {
                console.log(e);
            });
        }


        /*重置表单*/
        reset(): void {
            this.menuModel = {
                parentId: 0,
                orderNum: {
                    type: Number,
                    default: 1
                },
                menuType: "",
                menuName: "",
                url: "",
                perms: "",
                visible: "",
                icon: "",
                component: "",
                redirect: "",
                remark: ""
            };
            (this as any).resetForm("menuForm");
        }

        /*关闭对话框*/
        closeDialog() {
            this.$nextTick(()=>{
                this.reset();
            });
        }

        searchFun(value: any): void {
            this.treeSelect.filterFun(value);
        }
        typeChange(){
            this.menuModel.visible='';
        }

        mounted() {

        }
        activated() {
            this.getData();
        }
    }
</script>

<style scoped lang="scss">

</style>

